<!-- ArticleDetail.vue -->
<template>
  <div class="article-page">
    <!-- 返回按钮 -->
    <div class="back-button-container">
      <el-button
        class="back-button"
        :icon="ArrowLeft"
        @click="goBack"
        circle
      ></el-button>
    </div>
    <div class="container">
      <!-- 文章详情 -->
      <div v-if="article" class="article-detail">
        <h1 class="article-title">{{ article.title }}</h1>
        <div class="article-meta">
          <span class="article-type">{{ article.type }}</span>
          <span class="article-user-title">来自：</span>
          <span class="article-user">{{ article.createUserName }}</span>
          <span class="article-date">{{ formatDate(article.createTime) }}</span>
        </div>
        <!-- Markdown 内容 -->
        <MarkdownRenderer
          v-if="article.contentType === 'markdown'"
          :content="article.content"
        />
        <!-- 富文本内容 -->
        <div
          v-else-if="article.contentType === 'richtext'"
          class="article-content richtext-content"
          v-html="article.content"
        ></div>
        <!-- 普通文本内容 -->
        <div v-else class="article-content">{{ article.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getArticleContent } from '@/api/articles'
import { ElMessage, ElButton } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import MarkdownRenderer from '@/components/MarkdownRenderer.vue'

const route = useRoute()
const router = useRouter()
const article = ref(null)

// 获取文章内容
const fetchArticle = async () => {
  try {
    const res = await getArticleContent(route.params.id)
    article.value = res.data
    console.log('Fetched article:', article.value) // 日志：获取到的文章内容
  } catch (error) {
    console.error('Error fetching article:', error) // 错误日志
    ElMessage.error('获取文章内容失败')
  }
}

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD')
}

// 返回上一页
const goBack = () => {
  router.push({ name: 'Home' }) // 假设主页路由名称为 'Home'
}

// 组件挂载时获取文章内容
onMounted(fetchArticle)
</script>

<style lang="scss">
@import '@/assets/styles/variables.scss';

/* 文章页面整体样式 */
.article-page {
  min-height: 100vh;
  padding: $spacing-large 0;
  position: relative;
}

/* 内容容器样式 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 $spacing-medium;
}

/* 返回按钮容器样式 */
.back-button-container {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

/* 返回按钮样式 */
.back-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
  }
}

/* 文章详情样式 */
.article-detail {
  background-color: white;
  padding: $spacing-large;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 文章标题样式 */
.article-title {
  font-size: 28px;
  font-weight: bold;
  color: $text-color;
  margin-bottom: $spacing-medium;
}

/* 文章元信息样式 */
.article-meta {
  font-size: $font-size-small;
  color: $text-color-secondary;
  margin-bottom: $spacing-large;
}

/* 文章类型样式 */
.article-type {
  margin-right: $spacing-medium;
}

/* 文章作者样式 */
.article-user {
  margin-right: $spacing-medium;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .back-button-container {
    position: fixed;
    left: 10px;
    top: 60px;
    transform: none;
  }

  .back-button {
    width: 40px;
    height: 40px;
  }

  .container {
    padding: 0 $spacing-small;
  }

  .article-detail {
    padding: $spacing-medium;
  }
}
</style>